<div class="example-accordion-controls">
  <mat-checkbox [formControl]="wrap">Wrap (ArrowKey-only)</mat-checkbox>
  <mat-checkbox [formControl]="multi">Multi</mat-checkbox>
  <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
  <mat-checkbox [formControl]="">Soft Disabled</mat-checkbox>

  <mat-form-field subscriptSizing="dynamic" appearance="outline">
    <mat-label>Expanded Items</mat-label>
    <mat-select [(value)]="expandedIds" multiple>
      @for (item of items; track item) {
        <mat-option [value]="item">{{item}}</mat-option>
      }
    </mat-select>
  </mat-form-field>
</div>

<div
  ngAccordionGroup
  class="example-accordion-group"
  [multiExpandable]="multi.value"
  [disabled]="disabled.value"
  [softDisabled]="softDisabled.value"
  [wrap]="wrap.value"
  [(expandedPanels)]="expandedIds"
>
  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
        Item 1 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item1" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 1.</p>
        <button>Focusable Button</button>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item2" disabled>
        Item 2 Trigger (disabled)
        <mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
      </button>
    </h3>
    <div ngAccordionPanel panelId="item2" class="example-accordion-panel">
      <ng-template ngAccordionContent>
        <p>This is the content for Item 2.</p>
        <label>Input inside panel: <input type="text"></label>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
        Item 3 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
      </button>
    </h3>
    <div
      ngAccordionPanel
      panelId="item3"
      class="example-accordion-panel"
    >
      <ng-template ngAccordionContent>
        <p>This is the content for Item 3.</p>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
        Item 4 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
      </button>
    </h3>
    <div
      ngAccordionPanel
      panelId="item4"
      class="example-accordion-panel"
    >
      <ng-template ngAccordionContent>
        <p>This is the content for Item 4</p>
      </ng-template>
    </div>
  </div>

  <div class="example-accordion">
    <h3 class="example-accordion-header">
      <button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
        Item 5 Trigger
        <mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
      </button>
    </h3>
    <div
      ngAccordionPanel
      panelId="item5"
      class="example-accordion-panel"
    >
      <ng-template ngAccordionContent>
        <p>This is the content for Item 5</p>
      </ng-template>
    </div>
  </div>
</div>
